<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <style type="text/css">
        .layui-table-cell{
            height: 60px;
        }
        .flex{
            display: flex;
            align-items: center;
        }
    </style>
    <th:block th:include="include :: header('新增作业-课程-班级记录')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-class-add">
        <input name="courseId" th:value="${courseId}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">课程名称：</label>
            <div class="col-sm-8">
                <input name="courseName" class="form-control" type="text" disabled th:value="${courseName}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">选择需要布置作业的班级：</label>
            <div class="col-sm-8">
                <select class="form-control m-b" multiple id="classIds">
                    <option th:each="grade : ${classGradesList}" th:text="${grade.name}"
                            th:value="${grade.id}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">章节/知识点描述：</label>
            <div class="col-sm-8">
                <input name="knowledgeDescription" class="form-control" type="text">
            </div>
        </div>
        <!--            评价内容与学生能力相关性-->
        <div class="layui-card" id="evaluateAbilityRelevanceCard">
            <div class="layui-card-header">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;font-weight: bold">
                    <legend>作业布置</legend>
                </fieldset>
            </div>
            <div class="layui-btn-group" style="margin:20px 0 0 30px">
                <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-radio" onclick="addSelect();"></i></button>
                <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-form" onclick="addBlanks();"></i></button>
                <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-release" onclick="addShort();"></i></button>
                <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-upload-drag" onclick="addUpload();"></i></button>
            </div>
            <div id="topic"></div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">开始时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="beginTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">截至时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="endTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">补交时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="makeUpTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">补交扣分：</label>
            <div class="col-sm-8">
                <input name="deductScore" class="form-control" type="text" onkeyup="value=value.replace(/[^\d]/g,'')">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>


<script th:inline="javascript">
    Array.prototype.insert = function(index) {
        index = Math.min(index, this.length);
        arguments.length > 1
        && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
        && this.insert.apply(this, arguments);
        return this;
    };
    var prefix = ctx + "system/job"

    // 题目数目
    var topicNum = 0
    // 题目列表数据
    var topicList = []
    $("#form-class-add").validate({
        focusCleanup: true
    });

    // 删除题目
    function deleteTopic(num) {
        console.log('deleteTopic执行')
        $("#topicItem"+num).remove()
        for (let i = 0; i < topicList.length; i++) {
            if(topicList[i].index === num){
                topicList.splice(i,1)
            }
        }
    }

    // 增加选择题
    function addSelect(num){
        console.log('addSelect执行')
        num = 4
        topicNum = topicNum + 1
        var addSelectHtml = "<div id=\"topicItem"+topicNum+"\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
            "                <label class=\"col-sm-3 control-label\"> 第"+topicNum +"题（选择题）：</label>\n" +
            "                <div class=\"col-sm-8 flex\">\n" +
            "                    <input type=\"text\" name=\"topicName" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目名称\" class=\"layui-input\">\n" +
            "                    <input type=\"text\" name=\"topicScore" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目分值\" class=\"layui-input\" style='width: 150px;'>\n" +
                "<button type=\"button\" class=\"layui-btn\" onclick=\"deleteTopic(" +topicNum+");\">删除</button>" +
            "                </div>\n" +
            "            </div>\n" +
            "            <div class=\"flex\" style=\"padding:10px 30px;\">\n"
        var id = getRandom()
        for (let i = 0; i < num; i++) {
            var numName = getNumName(i+1)
            addSelectHtml +=numName + ".<input type=\"radio\" name=\"topicRadio"+ topicNum + "selectAnswer\" value=\""+numName+"\"><input type=\"text\" name=\"topicName"+ topicNum + "selectAnswer" + numName + "\" autocomplete=\"off\" placeholder=\"请输入选项答案\" class=\"layui-input\">\n"
            var topicItem = {
                "id":id,
                "index":topicNum,
                "type":"选择题",
                "title":"topicName" + topicNum,
                "score":"topicScore" + topicNum,
                "option":numName,
                "optionanswer": "topicName" + topicNum + "selectAnswer" + numName,
                "answer": "topicRadio" + topicNum + "selectAnswer"
            }
            topicList.push(topicItem)
        }
        addSelectHtml += "</div></div>"
        $("#topic").append(addSelectHtml)

    }

    // 增加填空题
    function addBlanks(){
        topicNum = topicNum + 1
        var addSelectHtml = "<div id=\"topicItem"+topicNum+"\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
            "                <label class=\"col-sm-3 control-label\"> 第"+topicNum +"题（填空题）：</label>\n" +
            "                <div class=\"col-sm-8 flex\">\n" +
            "                    <input type=\"text\" name=\"topicName" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目名称\" class=\"layui-input\">\n" +
            "                    <input type=\"text\" name=\"topicScore" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目分值\" class=\"layui-input\" style='width: 150px;'>\n" +
            "<button type=\"button\" class=\"layui-btn\" onclick=\"deleteTopic(" +topicNum+");\">删除</button>" +

            "                </div>\n" +
            "            </div>\n"
        addSelectHtml += "<div class=\"form-group\">\n" +
            "                <label class=\"col-sm-3 control-label\">填空题答案：</label>\n" +
            "                <div class=\"col-sm-8\">\n" +
            "                    <input name=\"topicName" + topicNum +"blanksAnswer\" class=\"form-control\" type=\"text\">\n" +
            "                </div>\n" +
            "            </div></div>"
        $("#topic").append(addSelectHtml)
        var topicItem = {
            "id":getRandom(),
            "index":topicNum,
            "type":"填空题",
            "title":"topicName" + topicNum,
            "score":"topicScore" + topicNum,
            "answer": "topicName" + topicNum + "blanksAnswer"
        }
        topicList.push(topicItem)
    }

    // 增加简答题
    function addShort(){
        topicNum = topicNum + 1
        var addSelectHtml = "<div id=\"topicItem"+topicNum+"\"><div class=\"form-group\" style='margin-top: 20px;'>\n" +
            "                <label class=\"col-sm-3 control-label\"> 第"+topicNum +"题（简答题）：</label>\n" +
            "                <div class=\"col-sm-8 flex\">\n" +
            "                    <input type=\"text\" name=\"topicName" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目名称\" class=\"layui-input\">\n" +
            "                    <input type=\"text\" name=\"topicScore" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目分值\" class=\"layui-input\" style='width: 150px;'>\n" +
            "<button type=\"button\" class=\"layui-btn\" onclick=\"deleteTopic(" +topicNum+");\">删除</button>" +

            "                </div>\n" +
            "            </div>\n"
        addSelectHtml += "<div class=\"form-group\">\n" +
            "                <label class=\"col-sm-3 control-label\">简答题答案：</label>\n" +
            "                <div class=\"col-sm-8\">\n" +
            "                    <input name=\"topicName" +topicNum +"shortAnswer\" class=\"form-control\" type=\"text\">\n" +
            "                </div>\n" +
            "            </div></div>"
        $("#topic").append(addSelectHtml)
        var topicItem = {
            "id":getRandom(),
            "index":topicNum,
            "type":"简答题",
            "title":"topicName" + topicNum,
            "score":"topicScore" + topicNum,
            "answer": "topicName" + topicNum + "shortAnswer"
        }
        topicList.push(topicItem)
    }

    // 增加文件上传题
    function addUpload(){
        topicNum = topicNum + 1
        var addSelectHtml = "<div id=\"topicItem"+topicNum+"\"><div class=\"form-group flex\" style='margin-top: 20px;'>\n" +
            "                <label class=\"col-sm-3 control-label\"> 第"+topicNum +"题（文件上传题）：</label>\n" +
            "                <div class=\"col-sm-8 flex\">\n" +
            "                    <input type=\"text\" name=\"topicName" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目名称\" class=\"layui-input\">\n" +
            "                    <input type=\"text\" name=\"topicScore" + topicNum +  "\" autocomplete=\"off\" placeholder=\"请输入题目分值\" class=\"layui-input\" style='width: 150px;'>\n" +
            "<button type=\"button\" class=\"layui-btn\" onclick=\"deleteTopic(" +topicNum+");\">删除</button>" +

            "                </div>\n" +
            "            </div></div>\n"
        $("#topic").append(addSelectHtml)
        var topicItem = {
            "id":getRandom(),
            "index":topicNum,
            "type":"文件上传题",
            "title":"topicName" + topicNum,
            "score":"topicScore" + topicNum,
        }
        topicList.push(topicItem)
    }

    function getNumName(num){
        console.log('getNumName执行')
        var numName
        if(num === 1){
            numName = 'A'
        }else if(num === 2){
            numName = 'B'
        }else if(num === 3){
            numName = 'C'
        }else if(num === 4){
            numName = 'D'
        }
        return numName
    }

    function submitHandler() {
        var saveData = {}
        // var evaluateAbilityRelevanceData = layui.table.cache.evaluateAbilityRelevanceId;
        // console.log('evaluateAbilityRelevanceData is', evaluateAbilityRelevanceData)
        // saveData.jobList = evaluateAbilityRelevanceData
        var formData = $('#form-class-add').serializeArray()
        saveData.jobList = parseJob(formData)
        // 格式化表单数据
        console.log('formData is', formData)
        formData.map(item =>{
            saveData[item.name] = item.value
        })
        var classIds = $('#classIds').val()
        console.log('classIds is',classIds)
        if(classIds){
            saveData.classIds = classIds.join(',')
        }
        console.log('saveData is', saveData)

        if ($.validate.form()) {
            $.operate.saveJson(prefix + "/add", JSON.stringify(saveData));
        }
    }

    function parseJob(formData) {
        const newTopList = []
        let scoreFlag = false
        for (let i = 0; i < topicList.length; i++) {
            const item = topicList[i]
            if(item.type === '选择题'){
                if(scoreFlag){
                    item.score = 0
                }else {
                    item.score = formData.filter(it =>it.name === item.score)[0].value
                    scoreFlag = true
                }
                item.title = formData.filter(it =>it.name === item.title)[0].value
                item.optionanswer =formData.filter(it =>it.name === item.optionanswer)[0].value
                item.answer = formData.filter(it =>it.name === item.answer)[0].value
            }else if(item.type === '填空题'){
                scoreFlag = false
                item.title = formData.filter(it =>it.name === item.title)[0].value
                item.score = formData.filter(it =>it.name === item.score)[0].value
                item.answer = formData.filter(it =>it.name === item.answer)[0].value
            }else if(item.type === '简答题'){
                scoreFlag = false
                item.title = formData.filter(it =>it.name === item.title)[0].value
                item.score = formData.filter(it =>it.name === item.score)[0].value
                item.answer = formData.filter(it =>it.name === item.answer)[0].value
            }else if(item.type === '文件上传题'){
                scoreFlag = false
                item.title = formData.filter(it =>it.name === item.title)[0].value
                item.score = formData.filter(it =>it.name === item.score)[0].value
            }
            newTopList.push(item)
        }
        console.log('newTopList is', newTopList)
        return newTopList;

    }

    function getRandom(){
        var num = '';
        for (var i = 0; i < 11; i++) {
            num += Math.floor(Math.random() * 10);
        }
        console.log(num);
        return num;
    }

    $("input[name='beginTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='endTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='makeUpTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
</body>
</html>
